<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page language="java" import="com.qdairlines.constant.BaseConsts" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath %>/bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-multiselect.css">
    <link href="<%=basePath %>/hplus/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basePath %>/plugins/bootstrapValidator/css/bootstrapValidator.min.css"  rel="stylesheet">
    
    
    <script src="<%=basePath %>/js/jquery.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrapQ.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/bootstrap-table.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
	<script src="<%=basePath%>/bootstrap/js/bootstrap-multiselect.js"></script>
	<script src="<%=basePath %>/js/util.js"></script>

	<link rel="stylesheet" href="<%=basePath%>/css/toastr.min.css">
	<script src="<%=basePath%>/js/toastr.min.js"></script>
	<script src="<%=basePath%>/js/toastrinit.js"></script>
	<!--  
	<script src="<%=basePath %>/plugins/validator/validator.min.js"></script>
	-->
<style> 
.table-hover>tbody>tr:hover{background-color:#C6E2FF}
</style>

<script type="text/javascript">
$(document).ready(function(){ 
    
	//在表中显示数据
    var url = '<%=basePath %>/role/listUserByRoleId.do';
    $("#table").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:true,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:10,
			pageNumber:1,
			sidePagination:'client', //客户端分页
		    search: true, //客户端搜索
			
            showRefresh: true,                  //是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            toolbar:"#custom-toolbar",
            
            height :"540",
            //showColumns:true
            //clickToSelect:true,
            onClickRow: function (row,$element) {
            	  $element.addClass('info').siblings().removeClass('info').end(); 
            }
    });
    
    
  //在表中显示数据
    var url = '<%=basePath %>/role/listUserByRoleIdNotRelate.do';
    $("#table_NotRelate").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:true,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:10,
			pageNumber:1,
			sidePagination:'client', //客户端分页
		    search: true, //客户端搜索
			
            showRefresh: true,                  //是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            toolbar:"#custom-toolbar-notrelate",
            height :"540",
            //showColumns:true
            clickToSelect:true,
            onClickRow: function (row,$element) {
            	  $element.addClass('info').siblings().removeClass('info').end(); 
            }


    });
    
    //在初始化和查询要传递的参数
    function queryParams(params){	
        return {
        	roleId:"${role.id}",

        	limit : params.limit ,
			offset : params.offset
        };
    };
    

});//document结束

function orderFormatter(value,row,index){
	return index+1;
}




//用户操作+
function operateFormatter_add(value, row, index) {

        return [
            '<a class="user_add ml10" href="javascript:void(0)" title="<spring:message code='base.add'/>">',
                '<span class="glyphicon glyphicon-plus "  style="font-size:15px;"></span>',
            '</a>',
        ].join('');
}


//用户操作-
function operateFormatter_remove(value, row, index) {

    return [
        '<a class="user_remove ml10" href="javascript:void(0)" title="<spring:message code='base.remove'/>">',
            '<span class="glyphicon glyphicon-minus "  style="font-size:15px;"></span>',
        '</a>',
    ].join('');
}

//添加所有选择的用户
function user_add_all(){
	var select = $("#table_NotRelate").bootstrapTable('getSelections');
	if(select.length == 0){
		toastr.error("<spring:message code='base.notselect'/>");
		return ;
	}
	for(var i = 0 ; i<select.length ; i++){
		$.ajax({
            type: "POST",
            async: false,
            url: "<%=basePath %>/user/saveUserRole.do",
            data: {workcode:select[i].workcode,roleId:"${role.id}"}
  		  });
	}
	   toastr.success("<spring:message code='base.success'/>");
       $("#table").bootstrapTable('refresh');
       $("#table_NotRelate").bootstrapTable('refresh');
       parent.$("#table").bootstrapTable('refresh');  // 父页面的table刷新
}

//移除所有选择的用户
function user_remove_all(){
	var select = $("#table").bootstrapTable('getSelections');
	if(select.length == 0){
		toastr.error("<spring:message code='base.notselect'/>");
		return ;
	}
	for(var i = 0 ; i<select.length ; i++){
		$.ajax({
            type: "POST",
            async: false,
            url: "<%=basePath %>/user/deleteUserRoleByUidRid.do",
            data: {workcode:select[i].workcode,roleId:"${role.id}"}
  		  });
	}
	 toastr.success("<spring:message code='base.success'/>");
       $("#table").bootstrapTable('refresh');
       $("#table_NotRelate").bootstrapTable('refresh');
       parent.$("#table").bootstrapTable('refresh');  // 父页面的table刷新
}

//操作功能
window.operateEvents = {
	'click a.user_remove': function (e, value, row, index) {
         		$.ajax({
  		            type: "POST",
  		             url: "<%=basePath %>/user/deleteUserRoleByUidRid.do",
  		             data: {workcode:row.workcode,roleId:"${role.id}"},
  		             success: function(data){
  		            	 toastr.success("<spring:message code='base.success'/>");
  		                 $("#table").bootstrapTable('refresh');
  		                 $("#table_NotRelate").bootstrapTable('refresh');
  		                 parent.$("#table").bootstrapTable('refresh');  // 父页面的table刷新
  		             } ,error:function(data){
		            	 toastr.error("<spring:message code='base.error'/>");
		            	 $("#table").bootstrapTable('refresh');
  		                 $("#table_NotRelate").bootstrapTable('refresh');
	            	 }
  		         });
          },'click a.user_add': function (e, value, row, index) {
       		$.ajax({
		             type: "POST",
		             url: "<%=basePath %>/user/saveUserRole.do",
		             data: {workcode:row.workcode,roleId:"${role.id}"},
		             success: function(data){
		            	 toastr.success("<spring:message code='base.success'/>");
  		                 $("#table").bootstrapTable('refresh');
  		                 $("#table_NotRelate").bootstrapTable('refresh');
  		                 parent.$("#table").bootstrapTable('refresh');  // 父页面的table刷新
		             } ,error:function(data){
		            	 toastr.error("<spring:message code='base.error'/>");
		            	 $("#table").bootstrapTable('refresh');
  		                 $("#table_NotRelate").bootstrapTable('refresh');
            	 }
		     });
      }
} ;
</script>

</head>
<body>
 <div class="row" style="margin:1px">
      <div class="col-md-6 col-sm-6">
            <div id="custom-toolbar">
    			<span class="fa-stack fa-lg text-success">
				  	<i class="fa fa-square-o fa-stack-2x"></i>
				  	<i class="fa fa-chain fa-stack-1x"></i>
				 </span>
				 <span class="text-success" id = "table_role_relate_title"><spring:message code='role.user.relate'/></span>
            </div>
            <table   id="table" class="table table-hover" >		  		    
                <thead>
                    <tr class="success"> 
                    	<th data-checkbox="true">i</th>
                    	<th data-field="depName"><spring:message code='user.depName'/></th>
                        <th data-field="workcode"><spring:message code='user.workcode'/></th>
                        <th data-field="userRealName"  ><spring:message code='user.userrealname'/></th> 
                        <th data-field="operation" data-formatter="operateFormatter_remove" data-events="operateEvents"> 
                        	<a class="user_remove_all ml10" href="javascript:void(0)" title="base.remove" onclick="user_remove_all()">
                        		<span class="glyphicon glyphicon-minus-sign " style="font-size:15px;">
                        		</span>
                        	</a>
                        </th>
                    </tr>
                </thead>             
            </table>
    	</div>  

	<div class="col-md-6 col-sm-6">
            <div id="custom-toolbar-notrelate">
            	<span class="fa-stack fa-lg text-danger">
				  <i class="fa fa-square-o fa-stack-2x"></i>
				  <i class="fa fa-chain-broken fa-stack-1x"></i>
				</span>
				<span class="text-danger" id = "table_role_no_relate_title"><spring:message code='role.user.notrelate'/></span>
            </div>
            <table   id="table_NotRelate" class="table table-hover" >		  		    
                <thead>
                    <tr class="success"> 
                  		<th data-checkbox="true">i</th>
                    	<th data-field="depName"><spring:message code='user.depName'/></th>
                        <th data-field="workcode"><spring:message code='user.workcode'/></th>
                        <th data-field="userRealName"  ><spring:message code='user.userrealname'/></th> 
                        <th data-field="operation" data-formatter="operateFormatter_add" data-events="operateEvents">
                        	<a class="user_add_all ml10" href="javascript:void(0)" title="base.remove" onclick="user_add_all()">
                        		<span class="glyphicon glyphicon-plus-sign " style="font-size:15px;">
                        		</span>
                        	</a>
                        </th>
                    </tr>
                </thead>             
            </table>
    	</div>  
  
</div>  
</body>
</html>